<template>
  <div class="container goods_detail">
    <div class="section">
      <ul class="info">
        <li class="list-item">
          <div class="tip">
            商品名称：
          </div>
          <div class="detail">
<!--            {{ project_detail.groupProjectName }}-->
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import { getProjectDetail, projectDetail } from '../../api/project'
  export default {
    data() {
      return {
        goods_id: 0,
        goods_detail: {},
        goods_data: {},
      }
    },
    created() {
      if (this.$route.query.id) {
        this.project_id = this.$route.query.id
        this.get_detail()
        this.get_data()
      }
    },
    methods: {
      get_detail() {
        projectDetail({
          id: this.goods_id
        }).then((result) => {
          const res = result.data
          if (res.code === 0) {
            this.goods_detail = res.data
          } else {
            this.$message.error(res.msg)
          }
        }).catch((err) => {
          this.$message.error('服务器网络错误，请稍后重试')
        })
      },
      get_data() {
        getProjectDetail({
          projectId: this.project_id
        }).then((result) => {
          const res = result.data
          if (res.code === 0) {
            this.project_data = res.data
          } else {
            this.$message.error(res.msg)
          }
        }).catch((err) => {
          // this.$message.error('服务器网络错误，请稍后重试');
          this.$message.error(err)
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .container {
    padding: 20px;
    .section {
      .title {
        width: 120px;
        height: 30px;
        background-color: #409eff;
        line-height: 30px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
      }
      .info {
        margin-left: 40px;
        .list-item {
          margin-bottom: 20px;
          .tip {
            color: #409eff;
            font-size: 16px;
            display: inline-block;
            vertical-align: middle;
            width: 130px;
            text-align: right;
          }
          .detail {
            color: #666;
            font-size: 16px;
            display: inline-block;
            vertical-align: middle;
            //   主图 和 项目展示图 列表
            .pic-list {
              .pic-item {
                display: inline-block;
                vertical-align: middle;
                background-color: #ccc;
                width: 100px;
                height: 100px;
                margin-right: 15px;
                overflow: hidden;
                .img {
                  width: 100% !important;
                  height: auto;
                  display: block;
                }
              }
            }
            //   项目详情图列表
            .detail-list {
              width: 375px;
              border: 1px solid #ccc;
              img {
                width: 100% !important;
                height: auto;
                display: block;
              }
            }
            &.project_detail {
              vertical-align: top;
            }
          }
        }
      }
    }
  }
</style>

<style lang="scss">
  .goods_detail {
    //   项目详情图列表
    .detail-list {
      width: 375px;
      min-height: 750px;
      border: 1px solid #ccc;
      img {
        width: 100% !important;
        height: auto;
        display: block;
      }
    }
  }
</style>

